<template>
  <div class="write-info wow animate__animated animate__zoomIn">
    <div class="info-form">
      <ul>
        <li class="INQUIRY">INQUIRY</li>
        <li class="INQUIRY mt10">开户咨询</li>
        <li class="invoter">您的投资，就此启程。</li>
        <li class="INQUIRY">
          <input
            type="text"
            class="input mt20"
            placeholder="贵姓 ｜ 称谓"
            :value="nameVal"
          />
        </li>
        <li class="INQUIRY mt20">
          <el-radio v-model="radio" label="1">先生</el-radio>
        </li>
        <li class="INQUIRY  mt10">
          <el-radio v-model="radio" label="2">女士</el-radio>
        </li>
        <li class="INQUIRY">
          <input
            type="text"
            class="input mt20"
            :value="phoneNumber"
            placeholder="联系电话或邮箱"
          />
        </li>
        <li class="INQUIRY"></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'writeInfo',
  data() {
    return {
      nameVal: '',
      phoneNumber: '',
      radio: '1'
    }
  }
}
</script>
<style scoped>
.write-info {
  width: 100%;
  height: 684px;
  background: #f2f2f2 no-repeat;
  background-image: url('../../assets/images/open.png');
  background-size: 72% 100%;
  overflow: hidden;
}
.info-form {
  width: 39%;
  height: 520px;
  background: #ffffff;
  margin-left: 51%;
  margin-top: 60px;
  padding: 2.8%;
  box-sizing: border-box;
}
.INQUIRY {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #c8161d;
  letter-spacing: 2.3px;
}
.invoter {
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #1e1e1e;
  letter-spacing: 0;
  margin-top: 10px;
}
.input {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  font-family: 'Noto Sans SC', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  text-align: left;
  width: 90%;
  border-width: 0;
  border-radius: 0;
  background-color: #f6f7f8;
  font-weight: 700;
  outline: none;
}
>>> .el-radio__label {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #1e1e1e;
  letter-spacing: 0;
  font-weight: 700;
}
>>> .el-radio__input.is-checked + .el-radio__label {
  color: #556570;
}
>>> .el-radio__input.is-checked .el-radio__inner {
  border-color: #f6f7f8;
  background-color: #556570;
}
</style>
